<template>
  <el-container>
    <el-aside :width="asideWidth">
      <main-sider :isCollapse="isCollapse" />
    </el-aside>
    <el-container>
      <el-header>
        <!-- <div class="admin-header-css"></div> -->
        <main-header @ctlSideBar="ctlSideBar" />
      </el-header>
      <el-scrollbar>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-scrollbar>

      <el-footer>
        <main-footer />
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
import MainHeader from "./MainHeader.vue";
import MainSider from "./MainSider.vue";
import MainFooter from "./MainFooter.vue";

export default {
  name: "WebMain",
  components: {
    MainHeader,
    MainSider,
    MainFooter,
  },
  data() {
    return {
      isCollapse: false,
      asideWidth: "240px",
    };
  },
  methods: {
    ctlSideBar() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.asideWidth = "auto";
      } else {
        this.asideWidth = "240px";
      }
    },
  },
};
</script>

<style lang="scss">
html,
body,
#app,
.el-container {
  height: 100% !important;
  overflow: hidden;
}
.el-header {
  z-index: 999;
  width: calc(100%);
  height: 60px;
  line-height: 60px;
  vertical-align: middle;
  background-color: #fff;
  padding: 0 !important;
  -webkit-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-box-shadow: 0 5px 20px -10px #cdcfe1;
  box-shadow: 0 5px 20px -10px #cdcfe1;
}
.el-main {
  /*background-color: #E9EEF3;*/
  padding: 15px;
  overflow-x: hidden;
  overflow-y: hidden;
}
.el-footer {
  background-color: #f0f0f0;
  // position: fixed;
  z-index: 1000;
  bottom: 0;
  line-height: 60px;
  width: calc(100%);
  border: 1px solid #e2e2e2;
}

.el-aside {
  background-color: #1a1d27;
  height: calc(100%);
}
.el-aside::-webkit-scrollbar {
  display: none;
}
</style>
